<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>margin重叠</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	.content{margin-top:20px;margin-bottom:20px;color:white;background:#ccc;}
	.blue{margin-top:20px;margin-bottom:20px;background:#09C;text-indent:20px;line-height:40px;}
	.red{margin-top:20px;margin-bottom:20px;background:#C30;text-indent:20px;line-height:40px;}
	.wrapper{background:#f3f3f3;border:1px dashed #ddd;margin-left:20px;margin-right:20px;}
	</style>
</head>
<body>
	<div class="content">
		<div class="blue">margin-top:20px;margin-bottom:20px;</div>
		<div class="red">margin-top:20px;margin-bottom:20px;</div>
	</div>
	<div class="wrapper">
		<h1>margin重叠规则：</h1>
		<p>常规流向中<em>两个或多个块框相邻的垂直边距会重合</em>。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。</p>
	</div>
</body>
</html>